<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :title="`${$t('details')}`"
    width="50%"
  >
    <div class="base-info">
      <el-form ref="form" :model="form" :inline="true" label-width="120px">
        <el-form-item :label="`${$t('formNo')}: `">
          <span>{{ form.formNo }}</span>
        </el-form-item>
        <el-form-item :label="`${$t('formType')}: `">
          <span>{{ $t(form.formTypeView) }}</span>
        </el-form-item>
        <el-form-item :label="`${$t('toolingBarcode')}: `">
          <span>{{ form.toolingBarcode }}</span>
        </el-form-item>
        <el-form-item :label="`${$t('toolingModel')}: `">
          <span>{{ form.toolingModel }}</span>
        </el-form-item>
        <el-form-item :label="`${$t('formStatus')}: `">
          <el-tag :type="form.formStatus | statusFilter" effect="dark"> {{ form.formStatus }} </el-tag>
        </el-form-item>
        <el-form-item :label="`${$t('EnumCheckItemFinalResult_Result')}: `">
          <el-tag :type="form.result | statusFilter" effect="dark"> {{ form.result }} </el-tag>
        </el-form-item>
        <el-form-item :label="`${$t('creator')}: `">
          <span>{{ form.creator }}</span>
        </el-form-item>
        <el-form-item :label="`${$t('createTime')}: `">
          <span>{{ form.createTime }}</span>
        </el-form-item>
      </el-form>
    </div>
    <dynTable
      ref="dynTable"
      :loading="tableLoading"
      :table-data="tableData"
      :table-columns="tableColumns"
    />
  </el-dialog>
</template>

<script>
import toolinghistoryApi from '@/api/Tooling/toolingHistory'
import mySetting from '@/mixins/mySetting'
import { mapGetters } from 'vuex'
export default {
  name: '',
  components: {},
  filters: {
    statusFilter(val) {
      const statusMap = {
        'Pass': 'success',
        'Fail': 'danger',
        'COMPLETED': 'success',
        'STARTED': 'danger'
      }
      return statusMap[val]
    }
  },
  mixins: [mySetting],
  props: {},
  data() {
    return {
      dialogVisible: false,
      form: {},
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'itemName', label: this.$t('itemName') },
        { prop: 'itemValue', label: this.$t('itemValue'), templete: (_scope) => {
          if (/^Files/g.test(_scope.row.itemValue)) {
            return (
              <el-link href={this.baseApi + '/' + _scope.row.itemValue} type='primary' target='_blank' underline={false}>{ _scope.row.itemValue }</el-link>
            )
          } else {
            return (
              <span>{ _scope.row.itemValue }</span>
            )
          }
        } }
      ],
      tableLoading: true
    }
  },
  computed: {
    ...mapGetters(['baseApi'])
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //   打开
    async handleOpen(id) {
      const res = await toolinghistoryApi.getInfo({ id })
      this.form = res.data
      this.tableData = res.data.itemResultList
      this.tableLoading = false
      this.dialogVisible = true
    },
    //   关闭
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    doDownFile(link) {
      if (/^Files/g.test(link)) {
        // 两个随便用
        // window.location.href = this.baseApi + '/' + link
        window.open(this.baseApi + '/' + link)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.base-info {
  .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .el-form-item {
      width: 48%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
